<template>
    <div ref="myChart01"></div>
</template>

<script lang="ts" setup>
    // 引入echarts
    import * as echarts from 'echarts'
    import {ref, onMounted,defineProps} from "vue";
    const props  = defineProps(["value","content"])
    const myChart01: any = ref(null);
    onMounted(() => { // 需要获取到element,所以是onMounted的Hook
        let myChart = echarts.init(myChart01.value);
        const www = 20;
        const value = props.value;
        // 绘制图表
        myChart.setOption({
            series: [
                {
                    type: 'gauge',
                    center: ["50%", "60%"],
                    startAngle: 200,
                    endAngle: -20,
                    min: 0,
                    max: 100,
                    splitNumber: 10,
                    itemStyle: {
                        color: '#ec6100'
                    },
                    progress: {
                        show: true,
                        width: www
                    },
                    pointer: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            width: www
                        }
                    },
                    axisTick: {
                        distance: -25,
                        splitNumber: 5,
                        lineStyle: {
                            width: 2,
                            color: '#0c8a89'
                        }
                    },
                    splitLine: {
                        distance: -30,
                        length: 12,
                        lineStyle: {
                            width: 2,
                            color: '#0c8a89'
                        }
                    },
                    axisLabel: {
                        distance: -8,
                        color: '#0c8a89',
                        fontSize: 14
                    },
                    anchor: {
                        show: false
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        valueAnimation: true,
                        width: '60%',
                        lineHeight: 25,
                        height: '15%',
                        borderRadius: 8,
                        offsetCenter: [0, '-15%'],
                        fontSize: 20,
                        fontWeight: 'bolder',
                        formatter: props.content,
                        color: 'auto'
                    },
                    data: [{
                        value: value
                    }]
                },
                {
                    type: 'gauge',
                    center: ["50%", "60%"],
                    startAngle: 200,
                    endAngle: -20,
                    min: 0,
                    max: 100,
                    itemStyle: {
                        color: '#eaa652',
                    },
                    progress: {
                        show: true,
                        width: 8
                    },
                    pointer: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{
                        value: value,
                    }]

                }
            ],
        });
        window.onresize = function () { // 自适应大小
            myChart.resize();
        };
    });
</script>
